<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="/res/third/bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="/res/common/js/jquery.1.9.1.min.js" type="text/javascript"></script>
<script src="/res/third/artDialog/jquery.artDialog.js" type="text/javascript"></script>
<script src="/res/third/validate/jquery.validate.js" type="text/javascript"></script>
<script src="/res/third/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/res/third/easyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
	function sosuo() {
		var lpath = location.pathname;
		$("#soform").attr("action", lpath + "?pageNo=" + 1);

		$("#soform").submit();
	}
</script>
</head>

<body>
	<div class="panel panel-info panel-content">
		<div class="panel-heading">
			<button type="button" onclick="addadvertise()" class="btn btn-info">
				<span class="glyphicon glyphicon-plus"></span>
				&nbsp;新增广告
			</button>
		</div>
		<table class="table table-hover table-bordered table-striped table-condensed">
			<thead>
				<tr>
					<th width="5%">排序</th>
					<th width="20%">广告名称</th>
					<th width="15%">所属广告位</th>
					<th width="15%">链接</th>
					<th width="5%">状态</th>
					<th width="10%">色号</th>
					<th width="15%">结束时间</th>
					[#--<th width="5%">访问统计</th>--]
					<th width="15%">操作</th>
				</tr>
			</thead>
			[#list pagination.list as advertiseImg ]
			<tr data-imgid="${advertiseImg.id!}">
				<td align="center">${advertiseImg.seq!}</td>
				<td align="center">${advertiseImg.imgName!}</td>
				<td align="center">[#list advertises as advertise][#if advertiseImg.adId??][#if advertiseImg.adId==advertise.id]${advertise.adName!}[/#if][/#if][/#list]</td>
				<td align="center">${advertiseImg.imgUrl!}</td>
				<td align="center">[#if advertiseImg.state??][#if advertiseImg.state==1]启用[#else]未启用[/#if][/#if]</td>
				<td align="center">${advertiseImg.color!}</td>
				<td align="center">${advertiseImg.endtime?string("yyyy-MM-dd")}</td>
				[#--<td align="center">${advertiseImg.hit!0}</td>--]
				<td align="center">
					<button type="button" class="btn btn-primary btn-xs delbtn" onclick="edit('${advertiseImg.id}','${advertiseImg.imgName!}','${advertiseImg.adId!}','${advertiseImg.state!}','${advertiseImg.color!}','${advertiseImg.starttime?string('yyyy-MM-dd')!}','${advertiseImg.endtime?string('yyyy-MM-dd')!}','${advertiseImg.hit!}','${advertiseImg.imgPath!}','${advertiseImg.imgUrl!}','${advertiseImg.imgType!}', '${advertiseImg.seq!}')">编辑</button>
					<button type="button" class="btn btn-danger btn-xs delbtn" onclick="del('${advertiseImg.id}')">删除</button>
				</td>
			</tr>
			[/#list]
		</table>

		<div class="panel-footer">[@fenye p = pagination form = 'infoForm' /]</div>
	</div>


	<!-- 新增的弹出页 -->
	<div id="addadv" style="width: 600px; height: 600px; display: none;">
		<form id="addform" method="post" class="form-horizontal" role="form">
			<input type="hidden" name="imgPath" id="addpath">
			<div class="form-group">
				<label class="col-sm-2 control-label" id="clickforpro">广告名称</label>
				<div class="col-sm-8">
					<input type="text" class="form-control" placeholder="" min="1" required="required" name="imgName" id="addname">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">投放位置</label>
				<div class="col-sm-8">
					<select class="form-control" name="adId" id="addadid">
						<option value="">请选择</option>
						[#list advertises as advertise]
						<option value="${advertise.id}">${advertise.adName!}</option>
						[/#list]
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">广告链接</label>
				<div class="col-sm-8">
					<input type="text" class="form-control" required="required" name="imgUrl" id="addurl">
				</div>
			</div>
            
            <div class="form-group">
				<label class="col-sm-2 control-label">广告色号</label>
				<div class="col-sm-8">
					<input type="text" class="form-control" name="color" id="addcolor">
				</div>
			</div>
            
			<div class="form-group">
				<label class="col-sm-2 control-label">开始时间</label>
				<div class="col-sm-8">	
					<input type="text" class="form-control" required="required" name="starttime" id="addstartdate">
				</div>	
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">结束时间</label> 
				<div class="col-sm-8">	
					<input type="text" class="form-control" required="required" name="endtime" id="addenddate">
				</div>	
			</div>
            <div class="form-group">
                <label class="col-sm-2 control-label">序号</label>
                <div class="col-sm-3">
                    <input type="number" class="form-control" required="required" name="seq" id="addseq">
                </div>
            </div>
			<div class="form-group">
				<label class="col-sm-2 control-label">是否启用</label>
				<div class="col-sm-8">
					<input type="radio" id="addstatetrue" placeholder="" min="1" required="required" name="state" value="1" checked="checked">是
					<input type="radio" id="addstatefalse" placeholder="" min="1" required="required" name="state" value="0">否
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">广告图片</label>
				<div class="col-sm-8">	
					<button onclick="addupload()" type="button" class="btn btn-info">修改图片</button>
					<img id="addimg" src="" style="width:100%;  height:250px"/>
				</div>	
			</div>
			<div class="form-group" style="margin-top: 10px;">
				<div class="col-sm-offset-2 col-sm-10">
					<input id="addsubmit" onclick="subadd()" type="button" class="btn btn-default" value="提交" />
				</div>
			</div>
			
		</form>
	</div>

	<!-- 编辑的弹出页 -->
	<div id="editadv" style="width: 600px; height: 600px; display: none;">
		<form id="editform" method="post" class="form-horizontal" role="form">
			<input type="hidden" name="imgPath" id="editpath">
			<input type="hidden" name="id" id="editid">
			<div class="form-group">
				<label class="col-sm-2 control-label" id="clickforpro">广告名称</label>
				<div class="col-sm-8">
					<input type="text" class="form-control" placeholder="" min="1" required="required" name="imgName" id="editname">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">投放位置</label>
				<div class="col-sm-8">
					<select class="form-control" name="adId" id="editadid">
						[#list advertises as advertise]
						<option value="${advertise.id}"  >${advertise.adName!}</option>
						[/#list]
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">广告链接</label>
				<div class="col-sm-8">
					<input type="text" class="form-control" placeholder="" min="1" required="required" name="imgUrl" id="editurl">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">广告色号</label>
				<div class="col-sm-8">	
					<input type="text" class="form-control"  name="color" id="editcolor">
				</div>	
			</div>
 
			<div class="form-group">
				<label class="col-sm-2 control-label">开始时间</label>
				<div class="col-sm-8">	
					<input type="text" class="form-control" required="required" name="starttime" id="editstartdate">
				</div>	
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">结束时间</label> 
				<div class="col-sm-8">	
					<input type="text" class="form-control" required="required" name="endtime" id="editenddate">
				</div>	
			</div>
            <div class="form-group">
                <label class="col-sm-2 control-label">序号</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" required="required" name="seq" id="editseq">
                </div>
            </div>
			<div class="form-group">
				<label class="col-sm-2 control-label">是否启用</label>
				<div class="col-sm-8">
					<input type="radio" id="editstatetrue" placeholder="" min="1" required="required" name="state" value="1">是
					<input type="radio" id="editstatefalse" placeholder="" min="1" required="required" name="state" value="0">否
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">广告图片</label>
				<div class="col-sm-8">	
					<button onclick="editupload()" type="button" class="btn btn-info">修改图片</button>
					<img id="editimg" src="" style="width:100%; height:250px"/>
				</div>	
			</div>
			<div class="form-group" style="margin-top: 10px;">
				<div class="col-sm-offset-2 col-sm-10">
					<input id="editsubmit" onclick="subedit()" type="button" class="btn btn-default" value="提交" />
				</div>
			</div>
		</form>
	</div>




</body>
</html>
<script type="text/javascript">
$(function() {
	$("#addstartdate").datebox({
		formatter : function(date) {
			var y = date.getFullYear();
			var m = date.getMonth() + 1;
			var d = date.getDate();
			return y + '-' + m + '-' + d;
		},
		onSelect : function(dateselect) {
			//enddate清空
			$('#addenddate').datebox('setValue', '');
			$("#addenddate").datebox("calendar").calendar({
				validator : function(date) {
					return dateselect < date;
				}
			});
		}
	})

	$("#addenddate").datebox({
		formatter : function(date) {
			var y = date.getFullYear();
			var m = date.getMonth() + 1;
			var d = date.getDate();
			return y + '-' + m + '-' + d;
		}
	})
	
	$("#editstartdate").datebox({
		formatter : function(date) {
			var y = date.getFullYear();
			var m = date.getMonth() + 1;
			var d = date.getDate();
			return y + '-' + m + '-' + d;
		},
		onSelect : function(dateselect) {
			//enddate清空
			$('#editenddate').datebox('setValue', '');
			$("#editenddate").datebox("calendar").calendar({
				validator : function(date) {
					return dateselect < date;
				}
			});
		}
	})

	$("#editenddate").datebox({
		formatter : function(date) {
			var y = date.getFullYear();
			var m = date.getMonth() + 1;
			var d = date.getDate();
			return y + '-' + m + '-' + d;
		}
	})
})
	Date.prototype.Format = function (fmt) {
	    var o = {
	        "M+": this.getMonth() + 1, //月份 
	        "d+": this.getDate(), //日 
	        "h+": this.getHours(), //小时 
	        "m+": this.getMinutes(), //分 
	        "s+": this.getSeconds(), //秒 
	        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
	        "S": this.getMilliseconds() //毫秒 
	    };
	    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	    for (var k in o)
	    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
	    return fmt;
	}
	
	//展示新增窗口
	function addadvertise() {
		dialog = art.dialog({
			title : "新增广告",
			lock : true,
			content : document.getElementById('addadv')
		});
	}
	//删除
	function del(id) {//弹出警告框判断是否删除
		if (confirm('是否确认删除')) {
			$.ajax({
				url : '/advertise/img_del.do',
				type : 'get',
				dataType : 'json',
				data : {
					id : id
				},
				beforeSend : function() {
					art.dialog.tips("删除中...");
				},
				success : function(data) {
					if (data.success) {
						location.reload();
					} else {
						error_msg(data.msg, function() {
							location.reload();
						});
					}
				}
			});
		}
	}

	//打开编辑窗口
	function edit(id, name, adid, state,color,starttime, endtime, hit, imgpath, imgurl, imgtype, seq) {
		$("#editid").val(id);
		$("#editname").val(name);
		$("#editadid").val(adid);
		$("#editcolor").val(color);
		$('#editstartdate').datebox('setValue', starttime);
		$('#editenddate').datebox('setValue', endtime);
		$("#editurl").val(imgurl);
		$('#editseq').val(seq);
		$("#editimg").attr("src",imgpath);
		$("#editpath").val(imgpath);
		$("#edittype").val(imgtype);
		if(state==1)
		{
			$("#editstatetrue").prop("checked",true)
		}
		if(state==0)
		{
			$("#editstatefalse").prop("checked",true)
		}
		dialog = art.dialog({
			title : "修改广告位",
			lock : true,
			content : document.getElementById('editadv')
		});
	}
	//新增提交
	function subadd(){
	[#--提交之前 form 要手动进行验证--]
	
	var name = $("input[id='addname']").val();
	if (!name) {
		alert('广告名称必须填写!');
		return;
	}
	var adid = $("select[id='addadid']").val();
	if (!adid) {
		alert('投放位置必须填写!');
		return;
	}
	var imgtype = $("input[id='addtype']").val();
	/*if (!imgtype) {
		alert('广告类型必须填写!');
		return;
	}*/
	var imgurl = $("input[id='addurl']").val();
	if (!imgurl) {
		alert('广告链接必须填写!');
		return;
	}
	var imgpath = $("input[id='addpath']").val();
	if (!imgpath) {
		alert('请先上传广告图片!');
		return;
	}
	
	
	art.dialog.post({
		url: "/advertise/img_save.do",
        data:$("#addform").serialize(),
        success: function(data){
            if(data.success){
                location.reload();
            }else{
            	alert(data.msg)
            }
        }
	},"加载中...");
	
	}
	
	//编辑提交
	function subedit(){
	[#--提交之前 form 要手动进行验证--]
	
	var name = $("input[id='editname']").val();
	if (!name) {
		alert('广告位名称必须填写!');
		return;
	}
	var adid = $("select[id='editadid']").val();
	if (!adid) {
		alert('投放位置必须填写!');
		return;
	}
	var imgtype = $("input[id='edittype']").val();
	/*if (!imgtype) {
		alert('广告类型必须填写!');
		return;
	}*/
	var imgurl = $("input[id='editurl']").val();
	if (!imgurl) {
		alert('广告链接必须填写!');
		return;
	}
	var imgpath = $("input[id='editpath']").val();
	if (!imgpath) {
		alert('请先上传广告图片!');
		return;
	}

	art.dialog.post({
		url: "/advertise/img_edit.do",
        data:$("#editform").serialize(),
        success: function(data){
            if(data.success){
                location.reload();
            }else{
            	alert(data.msg)
            }
        }
	},"加载中...");
	}
	
	//新增上传
	function addupload() {
		exceldialog = art.dialog.uploadFile("上传图片", {
			callback : "adduploadcallback",
			userpath : "admin",
			extensions : "gif,jpg,png,jepg"
		});
	}
	function adduploadcallback(response) {
		exceldialog.close();
		$("#addimg").attr("src", response.url);
		$("#addpath").val(response.url);
	}
	
	//编辑上传
	function editupload() {
		exceldialog = art.dialog.uploadFile("上传图片", {
			callback : "edituploadcallback",
			userpath : "admin",
			extensions : "gif,jpg,png,jepg"
		});
	}
	function edituploadcallback(response) {
		exceldialog.close();
		$("#editimg").attr("src", response.url);
		$("#editpath").val(response.url);
	}

</script>